<template>
    <div class="">
        <div class="tree-header">
            <el-input v-model="state.tree.tenantName" placeholder="请输入租户名称" clearable prefix-icon="Search" />
        </div>
        <div class="tree-body">
            <el-tree :data="data" :props="{ label: 'label', children: 'children' }" :expand-on-click-node="false"
                :filter-node-method="filterNode" ref="deptTreeRef" node-key="id" highlight-current default-expand-all 
                @node-click="handleNodeClick" />
        </div>
    </div>
</template>

<script setup>
import { reactive, ref, toRefs, onMounted, watch } from "vue";


const deptTreeRef = ref(null);

const emits = defineEmits(['treeSarch']);

const props = defineProps({
    data: Array,
});

//组件状态
const state = reactive({
    dialogVisible: false,
    userForm: {

    },
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        userName: null,
        iphone: null,
        loginName: null,
    },
    tree: {
        data: [],
        tenantName: '',
    }
});

/** 通过条件过滤节点  */
const filterNode = (value, data) => {
    if (!value) return true;
    return data.label.indexOf(value) !== -1;
};

/** 根据名称筛选部门树 */
watch(() => state.tree.tenantName, val => {
    deptTreeRef.value.filter(val);
});

/** 节点单击事件 */
function handleNodeClick(data) {
    emits('treeSarch', data)
}

function resetTree() {
    deptTreeRef.value.setCurrentKey(null);
}

defineExpose({
    resetTree
})

</script>

<style scoped lang="scss">
:deep(.el-tree-node.is-current > .el-tree-node__content) {
    background: rgba(68, 185, 121, 0.1);
    color: #44b979;
}

.tree-header {
    line-height: 78px;
}
</style>